<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *,
      *:after,
      *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
      }

      body {
        font-family: arial;
        font-size: 16px;
        margin: 0;
        background: linear-gradient(133deg, #4abeb2, #3c57d2);
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
      }

      .container {
        background: white;
        width: 450px;
        padding: 30px;
        border-radius: 5px;
      }
      #showImg {
        display: block;
        margin: 0 auto;
        max-width: 400px;
        min-height: 200px;
        background: #174353;
        border-radius: 5px;
      }
      input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        z-index: 1;
      }

      .button {
        display: flex;
      }
      button,
      .upload {
        width: 220px;
        margin: 50px 20px 10px 20px;
        text-align: center;
        position: relative;
        padding: 10px 5px;
        font-size: 17px;
        outline: none;
        color: #fff;
        border: none;
        background-color: #023780;
        border-radius: 5px;
        display: block;
      }

      .upload {
        background: #a74901;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img id="showImg" src="images/img.png" />
      <div class="button">
        <div class="upload">
          <input
            type="file"
            onChange="loadFile_(event)"
            name=""
            accept=".png, .jpg, .jpeg"
          />
          上传图片
        </div>
        <button onClick="pdfDown()">下载PDF</button>
      </div>
    </div>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
      integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
      crossorigin="anonymous"
    ></script>

    <script>
      var newImage, showImg;
      function loadFile_(event) {
        showImg = document.getElementById('showImg');
        showImg.src = URL.createObjectURL(event.target.files[0]);
        console.log(URL.createObjectURL(event.target.files[0]));
        console.log(event.target.files);

        newImage = document.createElement('img');
        newImage.src = URL.createObjectURL(event.target.files[0]);

        showImg.onload = function () {
          URL.revokeObjectURL(showImg.src);
        };
      }

      function pdfDown() {
        console.log(newImage);
        var doc = new jsPDF();
        doc.addImage(newImage, 10, 10);
        doc.save('ImgToPDF.pdf');
      }
    </script>
  </body>
</html>
